<template>
    <div class="song-left">
        <div class="cover">
            <div class="cover-img">
                <el-image :src="props.picUrl" :preview-src-list="[props.picUrl]" :z-index="9999">
                    <div slot="placeholder" class="image-slot">
                        <i class="iconfont icon-placeholder"></i>
                    </div>
                </el-image>
            </div>
            <div class="cover-play-img">
                <el-image :src="props.picUrl">
                    <div slot="placeholder" class="image-slot">
                        <i class="iconfont icon-placeholder"></i>
                    </div>
                </el-image>
            </div>
        </div>
        <div class="btn">
            <el-row :gutter="0">
                <el-col :span="8">
                    <el-button type="primary" @click="playSong(props.songDetail)">
                        <i class="iconfont icon-bofang"></i>&nbsp; {{ props.songDetail.vip ? 'VIP尊享' : '播放'
                        }}</el-button></el-col>
                <el-col :span="8"><el-button type="info" plain @click="addPlayList(props.songDetail)"><i
                            class="iconfont icon-addlist"></i>&nbsp;添加</el-button></el-col>
                <el-col :span="8"><el-button type="info" plain>
                        <i class="iconfont icon-addlike"></i>&nbsp;收藏</el-button></el-col>
            </el-row>
        </div>
        <!-- 相似歌曲 -->
        <div class="songlist">
            <div class="songlist-title">
                <span>相似歌曲</span>
            </div>
            <div class="songlist-content">
                <div class="songlist-item" v-for="item in props.simiSong" :key="item">
                    <el-row>
                        <el-col :span="20">
                            <el-row>
                                <el-col :span="24">
                                    <el-link @click="router.push(`/song?id=${item.id}`)" class="song-name">{{ item.name
                                        }}</el-link>
                                </el-col>
                                <el-col :span="24">
                                    <span v-for="artist, index in item.artists" :key="artist" class="ar-name">
                                        <span v-if="index == 0"><el-link
                                                @click="router.push(`/singer/detail?id=${artist.id}`)">{{
                                                    artist.name
                                                }}</el-link></span>
                                        <span v-else> / <el-link
                                                @click="router.push(`/singer/detail?id=${artist.id}`)">{{
                                                    artist.name
                                                }}</el-link></span>
                                    </span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="4">
                            <i :title="`播放歌曲：${item.name}`" class="icon-1play1"
                                @click="playSong(formatSongDetail(item))">
                                <svg t="1705754613079" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4349" width="20" height="20">
                                    <path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D"
                                        p-id="4350"></path>
                                    <path
                                        d="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z"
                                        fill="#4D4D4D" p-id="4351"></path>
                                    <path
                                        d="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z"
                                        fill="#4D4D4D" p-id="4352"></path>
                                </svg>
                            </i>
                            <i :title="`添加歌曲：${item.name}到播放列表`" class="icon-1add1"
                                @click="addPlayList(formatSongDetail(item))">
                                <svg t="1705754804399" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5399" width="20" height="20">
                                    <path
                                        d="M819.2 189.44a30.72 30.72 0 0 1 1.152 61.41952L819.2 250.88H143.36a30.72 30.72 0 0 1-1.152-61.41952L143.36 189.44h675.84zM819.2 435.2a30.72 30.72 0 0 1 1.152 61.41952L819.2 496.64H143.3856a30.72 30.72 0 0 1-1.152-61.41952l1.152-0.02048H819.2zM542.72 680.96a30.72 30.72 0 0 1 1.152 61.41952L542.72 742.4H143.3856a30.72 30.72 0 0 1-1.152-61.41952l1.152-0.02048H542.72zM880.64 680.98048a30.72 30.72 0 0 1 1.152 61.41952l-1.152 0.02048h-184.32a30.72 30.72 0 0 1-1.152-61.4144l1.152-0.0256h184.32z"
                                        fill="#000000" p-id="5400"></path>
                                    <path
                                        d="M788.48 588.82048a30.72 30.72 0 0 1 30.69952 29.568l0.02048 1.152v184.32a30.72 30.72 0 0 1-61.41952 1.152l-0.02048-1.152v-184.32a30.72 30.72 0 0 1 30.72-30.72z"
                                        fill="#000000" p-id="5401"></path>
                                </svg>
                            </i>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { usePlayList, usePlayIndex } from '@/stores/playlist'
import { ElMessage } from 'element-plus'
import { formatSongDetail } from '@/utils/util'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
    picUrl: {
        type: String,
        default: ''
    },
    simiSong: {
        type: Array,
        default: []
    },
    songDetail: {
        type: Object,
        default: {}
    }
})

const addPlayList = (item) => {
    const obj = item //formatSongDetail(item)
    let flag = false
    //usePlayList().playlist遍历，如果有相同的id就不添加
    usePlayList().playlist.find((item) => {
        if (item.id == obj.id) {
            ElMessage({
                message: '歌曲已存在列表中',
                type: 'warning'
            })
            flag = true
            return
        }
    })
    if (flag) return
    usePlayList().playlist.push(obj)

}

const playSong = (obj) => {

    //遍历播放列表，如果有相同的id就播放
    const flag = usePlayList().playlist.find((item, index) => {

        if (item.id == obj.id) {
            usePlayIndex().playIndex = index

            return true
        }
    })
    if (flag) return
    usePlayList().playlist.push(obj)
    usePlayIndex().playIndex = usePlayList().playlist.length - 1

}

</script>

<style lang="less" scoped>
.song-left {
    width: 460px;
    box-sizing: border-box;
    padding: 35px;

    .cover {
        position: relative;
        width: 250px;
        margin-bottom: 50px;

        .cover-stylus {
            position: absolute;
            right: 0;
            top: -30px;
            z-index: 3;
            transform: rotate(-90deg);
        }

        .cover-img {
            position: relative;
            z-index: 2;
            width: 250px;
            height: 250px;
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.7);
            overflow: hidden;
        }

        .cover-play-img {
            position: absolute;
            top: 5px;
            left: 120px;
            z-index: 1;
            width: 100px;
            height: 100px;
            padding: 70px;
            // margin-left: 5px;
            font-size: 0;
            background: url('https://oss.haochongzb.com/zb/oss/net-easy/images/cd.png') no-repeat;
            background-size: contain;
            cursor: pointer;
            box-shadow: 0 0px 10px rgb(0 0 0 / 50%);
            border-radius: 100%;

            .el-image {
                border-radius: 100%;
                animation: soundPaying 15s linear infinite;
                animation-play-state: paused;
            }

            &.active {
                .cover-stylus {
                    transform: rotateZ(0);
                }

                .el-image {
                    animation-play-state: running;
                }
            }
        }
    }

    @keyframes soundPaying {
        from {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }

        to {
            -webkit-transform: rotate(370deg);
            transform: rotate(370deg)
        }
    }

    .btn {
        margin-bottom: 50px;
    }

    .songlist {
        .songlist-title {
            margin-bottom: 20px;
            font-size: 18px;
            // font-weight: bold;
            color: #585858;
        }

        .songlist-content {
            .songlist-item {
                margin-bottom: 10px;

                border-bottom: 1px solid #eee;
                padding-bottom: 5px;

                .song-name {
                    font-size: 15px;
                    // color: black;
                }

                .ar-name {
                    span {
                        el-link {

                            color: #999;
                            font-size: 12px;
                        }
                    }
                }

                .icon-1play1 {
                    margin-right: 10px;
                    color: #999;
                    cursor: pointer;
                }

                .icon-1add1 {
                    margin-right: 10px;
                    color: #999;
                    cursor: pointer;
                }

                //最后一个去掉border-bottom
                &:last-child {
                    border-bottom: none;
                }
            }

        }
    }
}
</style>